<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="root2"></div>
    <script type="text/babel">
        var users=["aa","bb","狗蛋"];
        var users2=["曲安丹","杜刚","巴刚"];

        function  UserList(users,dataName) {
            return users.map((u,i)=>{
                        return <li key={i} >{users,dataName}-{u}</li>;
                    });
        }
        function  UserList2(props) {
            // props={
            //     data：{}，
            //     dataName:""
            // }
            return props.data.map((u,i)=>{
                        return <li key={i} >{props.dataName}-{u}</li>;
                    });
        }

        class UserList3 extends React.Component{
            //this.props
            render(){
                return this.props.data.map((u,i)=>{
                        return <li key={i} >{this.props.dataName}-{u}</li>;
                    });
            }
        }
        ReactDOM.render(
            <div>
                <ul>
                    {UserList(users,"UserList1")}
                </ul>
                <ul>
                    {UserList(users2,"UserList1")}
                </ul>
                <ul>
                    <UserList2 data={users2} dataName="UserList2" />
                </ul>
                <ul>
                    <UserList3 data={users} dataName="UserList3" />
                </ul>
            </div>,
            document.getElementById("root"));

        class HelloMessage extends React.Component {
            render() {
            return <h1>Hello {this.props.name}</h1>;
            }
        }
        ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById('root2')
      );
    </script>
    <div id="root3"></div>
    <script type="text/babel">
    class NotesList extends React.Component {
        render() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      }
      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('root3'));
    </script>
</body>

</html>